<template>
    <el-container>
        <div
            style="width: 100%;height: 50px; margin-top: 5px; margin-bottom: 5px;display: flex;flex-wrap: nowrap;justify-content: space-evenly;align-items: center;">
            <div style="display: flex;align-items: center">
                <span>审批类型:</span>
                <el-select v-model="search.type" placeholder="请选择审批类型" style="width: 150px;margin-left: 10px; "
                    filterable clearable>
                    <!-- <el-option v-for="(item, index) in appNameList" :key="index" :label="item.name"
                        :value="item.name"></el-option> -->
                    <el-option label="新增客户审批" :value="1"></el-option>
                </el-select>
            </div>

            <div style="display: flex;align-items: center">
                <span>申请人:</span>
                <el-input v-model="search.empName" placeholder="请输入申请人" style="margin-left: 10px; width: 150px"
                    clearable></el-input>
            </div>
            <div style="display: flex;align-items: center">
                <span>审批状态:</span>
                <el-select v-model="search.status" placeholder="请选择审批类型" style="width: 150px;margin-left: 10px; "
                    filterable clearable>
                    <el-option label="审批中" :value="0"></el-option>
                    <el-option label="审批通过" :value="1"></el-option>
                    <el-option label="审批驳回" :value="2"></el-option>
                </el-select>
            </div>

            <div style="display: flex;align-items: center">
                <span>申请时间:</span>
                <el-date-picker v-model="timeHorizon" type="daterange" range-separator="-" start-placeholder="起始时间"
                    end-placeholder="截止时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :size="size"
                    style="margin-left: 10px; width: 250px !important" />
            </div>

            <div style="display: flex;">
                <el-button type="primary" @click="upsearch">查询</el-button>
                <el-button type="" @click="cleanSearch">清空</el-button>
            </div>
        </div>

        <div class="search-box">
            <div class="panel-search-box">
                <scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出"
                    hideButton>
                </scFileExport>
            </div>
        </div>
        <el-header style="display: none"></el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" :params="params" border stripe remoteSort remoteFilter
                @selection-change="selectionChange">
                <el-table-column label="申请人" prop="empName" align="center" min-width="150"></el-table-column>
                <el-table-column label="申请时间" prop="createTime" align="center" min-width="150"></el-table-column>
                <el-table-column label="审批类型" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ changeType(scope.row.type) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审批状态" align="center" min-width="150">
                    <template #default="scope">
                        <span>{{ changeStatus(scope.row.status) }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" prop="roleName" align="center" min-width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button link type="warning" size="small" @click="handleMsg(scope.row)">查看详情</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>

        <el-drawer v-model="dialogApprovalDetail" title="审批详情" size="45%">
            <div style="padding:0 40px;">
                <labelnam title="基本信息"></labelnam>
                <div style="padding: 0 20px;">
                    <el-form label-width="80px" label-position="left">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="申请人:" prop="sceneList">
                                    <el-input :value="approvalData.empName" disabled clearable></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="审批类型:" prop="sceneList">
                                    <el-input :value="changeType(approvalData.type)" disabled clearable></el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="审批类型:" prop="sceneList">
                                   
                                    <template v-if="approvalData.customers&&approvalData.customers.length<4">
                                        <el-input v-for="item in approvalData.customers" :key="item.custId"
                                        :value="item.custName" disabled clearable></el-input>
                                    </template>

                                    <div v-else style="height: 140px;overflow-y: auto;width: 100%;">
                                            <el-input v-for="item in approvalData.customers" :key="item.custId"
                                        :value="item.custName" disabled clearable></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>


                <!-- <div style="padding:0 20px;font-size: 13px;margin-bottom: 40px;">
                    <p>申请人：{{ approvalData.empName }}</p>
                    <p style="margin: 10px 0;">审批类型：{{ changeType(approvalData.type) }}</p>
                    <p style="display: flex;">
                        审批内容：
                    <div>
                        <P v-for="item in approvalData.customers" :key="item.custId">{{ item.custName }}</P>
                    </div>
                    </p>
                </div> -->
                <labelnam title="审批流程"></labelnam>

                <table border="1" cellspacing="0" style="font-size: 13px" borderColor="#ebeef5">
                    <tr align="center" height="40">
                        <td width="120">审批阶段</td>
                        <td width="120">审批人</td>
                        <td width="150">审批时间</td>
                        <td width="120">审批结果</td>
                        <td width="120">整体审批状态</td>
                    </tr>

                    <tr align="center" v-for="item in approvalData.process" :key="item.id" height="40">
                        <td>{{ changeStage(item.level) }}</td>
                        <td>{{ item.approverName }}</td>
                        <td>{{ item.createTime }}</td>
                        <td>{{ changeStatus(item.status) }}</td>
                        <td>{{ changeStatus(approvalData.status) }}</td>
                    </tr>
                </table>
            </div>
        </el-drawer>

    </el-container>
</template>

<script>
import labelnam from './labelname.vue'

export default {
    name: 'approvalLog',
    components: { labelnam },
    data() {
        return {
            dialogApprovalDetail: false,
            timeHorizon: '',
            search: {},
            apiObj: this.$API.log.approvalList,
            params: {},
            approvalData: '',
            form: {}
        }
    },


    mounted() { },
    async created() { },
    methods: {
        upsearch() {
            if (this.timeHorizon) {
                this.search.startDate = this.timeHorizon[0]
                this.search.endDate = this.timeHorizon[1]
            }
            this.$refs.table.upData(this.search)
        },
        cleanSearch() {
            this.search = {}
            this.timeHorizon = null
            this.$refs.table.reload(this.search)
        },
        changeType(data) {
            switch (data) {
                case 1:
                    return '新增客户审批'

                default:
                    break;
            }
        },
        changeStatus(data) {
            switch (data) {
                case 0:
                    return '审批中'
                case 1:
                    return '审批通过'
                case 2:
                    return '审批驳回'
                default:
                    break;
            }
        },
        changeStage(data) {
            switch (data) {
                case 1:
                    return '初审'
                case 2:
                    return '复审'
                case 3:
                    return '终审'
                default:
                    break;
            }
        },
        async handleMsg(e) {
            this.dialogApprovalDetail = true
            let res = await this.$API.log.approvalDetail.get({ id: e.id })
            this.approvalData = res.data

        }

    }
}
</script>

<style>
.header-btn-item {
    display: flex;
}
</style>
